<template>
  <div class="contents">
    <div class="topItem">
      <div class="timeItem">
        <!-- <a-dropdown>
          <a @click.prevent class="timeChose"> {{ curYear }} </a>
          <template #overlay>
            <a-menu>
              <a-menu-item v-for="item in yearList" :key="item">
                <a href="javascript:;" @click="chooseYear(item)">{{ item }}</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown> -->

        <weather style="width: 35vw;"></weather>
      </div>
      <!-- <div class="checkpanel">
        <div @click="() => checkLand('land')">看地块</div>
        <div @click="() => checkLand('main')">看主体</div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import weather from "@/components/weather.vue";

let realWeatherInfo = ref({
  lives: [
    {
      weather: "",
      temperature: "",
      windDirection: "",
      windPower: "",
      humidity: "",
    },
  ],
});
const issue = ref({})
const id = ref("container" + Math.random());
let map = null;

const emit = defineEmits(['mapCheck', 'chooseYear'])

const checkLand = (type) => {
  emit('mapCheck', type)
};

let curYear = ref(new Date().getFullYear());
let yearList = ref([])
const chooseYear = (year) => {
  curYear.value = year;
  emit('chooseYear', year)
};
const initYear = () => {
  let now = new Date()
  curYear.value = now.getFullYear()
  yearList.value.push(curYear.value)
  for (let i = 1; i <= 10; i++) {
    yearList.value.push(curYear.value - i)
  }
}

onMounted(async () => {
 
  initYear()
});
</script>

<style scoped lang="scss">
.contents {
  position: relative;
  z-index: 10;
}

// .maps {
//   height: vh(640);
//   width: 100%;
// }

.topItem {
  // position: absolute;
  // top: 0;
  // z-index: 10;
  // width: 100%;
}

.timeItem {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .timeChose {
    width: vw(40);
    // height: vh(26);
    background: rgba(44, 215, 188, 0.5);
    border-radius: vw(8);
    border: vh(1) solid #2cd7bc;
    padding: vh(4) vw(10);

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(12);
    color: #ffffff;
    cursor: pointer;
    // line-height: vh(26);
  }

  .weaInfo {
    width: vw(550);
    height: vh(22);
    background: rgba(14, 54, 62, 0.75);
    border-radius: vh(8);
    padding: vh(4) vw(10);

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(12);
    color: #2cd7bc;
    line-height: vh(22);

    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.checkpanel {
  display: flex;
  z-index: 10;
  margin-top: vh(10);

  >div {
    background: rgba(44, 215, 188, 0.5);
    border-radius: 8px;
    border: vh(1) solid #2cd7bc;
    padding: vh(5) vh(10);
    margin-right: vw(10);

    font-size: vh(9);
    color: #ffffff;
    cursor: pointer;
  }
}

.infotabs {
  right: 0;
  position: absolute;
  width: vw(401);
  height: vh(68);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;

  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: vh(12);
  color: #ffffff;
  line-height: vh(18);
  padding: 0 vw(10);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

  >div {
    width: 33%;
  }

  .one::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #58aaf9;
    margin-right: vw(8);
  }

  .two::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #a76832;
    margin-right: vw(8);
  }

  .three::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #ed3b3b;
    margin-right: vw(8);
  }

  .four::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #60ffe9;
    margin-right: vw(8);
  }

  .five::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #ffc905;
    margin-right: vw(8);
  }

  .six::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #2ebf27;
    margin-right: vw(8);
  }
}
</style>